<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<u-navbar bgColor="#F5F9FC" :placeholder="true">
			<view slot="left" class="navbar-left">
				<navigator open-type="navigateBack" :delta="1" class="back-navigator">
					<view class="back-content">
						<u-icon color="#1e88e5" name="arrow-left"></u-icon>
						<text class="navbar-title">添加发票</text>
					</view>
				</navigator>
			</view>
		</u-navbar>

		<!-- 主内容区 -->
		<view class="content-container">
			<view class="form-card">
				<form class="invoice-form" @submit="saveInvoice">
					<!-- 发票类型 -->
					<view class="form-row">
						<view class="form-field">
							<view class="label-wrapper">
								<text class="field-label">发票类型</text>
								<text class="required-star">*</text>
							</view>
							<picker class="picker-field" mode="selector" :range="invoiceTypes" range-key="label"
								v-model="selectedInvoiceType" @change="onInvoiceTypeChange">
								<view class="picker-display">
									{{ selectedInvoiceType === -1 ? '请选择发票类型' : invoiceTypes[selectedInvoiceType].label }}
								</view>
							</picker>
						</view>
					</view>

					<!-- 发票标题 -->
					<view class="form-row">
						<view class="form-field">
							<view class="label-wrapper">
								<text class="field-label">发票标题</text>
								<text class="required-star">*</text>
							</view>
							<input class="text-input" type="text" placeholder="请输入发票标题" v-model="invoiceTitle"
								@input="validateTitle">
						</view>
					</view>

					<!-- 发票号码 -->
					<view class="form-row">
						<view class="form-field">
							<view class="label-wrapper">
								<text class="field-label">发票号码</text>
								<text class="required-star">*</text>
							</view>
							<input class="text-input" type="text" placeholder="请输入发票号码" v-model="invoiceNo"
								@input="validateInvoiceNo">
						</view>
					</view>

					<!-- 开票日期 -->
					<view class="form-row">
						<view class="form-field">
							<view class="label-wrapper">
								<text class="field-label">开票日期</text>
								<text class="required-star">*</text>
							</view>
							<picker class="picker-field" mode="date" start="2010-01-01" :end="currentDate"
								:value="invoiceDate" @change="onInvoiceDateChange">
								<view class="picker-display">
									{{ invoiceDate || '请选择开票日期' }}
								</view>
							</picker>
						</view>
					</view>

					<!-- 开票方 -->
					<view class="form-row">
						<view class="form-field">
							<view class="label-wrapper">
								<text class="field-label">开票方</text>
								<text class="required-star">*</text>
							</view>
							<input class="text-input" type="text" placeholder="请输入开票方名称" v-model="seller"
								@input="validateSeller">
						</view>
					</view>

					<!-- 发票金额 -->
					<view class="form-row">
						<view class="form-field">
							<view class="label-wrapper">
								<text class="field-label">发票金额</text>
								<text class="required-star">*</text>
							</view>
							<view class="amount-input-wrapper">
								<text class="currency-symbol">¥</text>
								<input class="amount-input" type="number" placeholder="请输入发票金额" v-model="invoiceAmount"
									@input="validateAmount">
							</view>
						</view>
					</view>

					<!-- 税率 -->
					<view class="form-row">
						<view class="form-field">
							<view class="label-wrapper">
								<text class="field-label">税率</text>
								<text class="required-star">*</text>
							</view>
							<view class="tax-rate-input-wrapper">
								<input class="tax-rate-input" type="number" placeholder="请输入税率" v-model="taxRate"
									@input="validateTaxRate">
								<text class="percent-symbol">%</text>
							</view>
						</view>
					</view>

					<!-- 税额 -->
					<view class="form-row">
						<view class="form-field">
							<view class="label-wrapper">
								<text class="field-label">税额</text>
							</view>
							<view class="tax-amount-input-wrapper">
								<text class="currency-symbol">¥</text>
								<input class="tax-amount-input" type="number" placeholder="请输入税额" v-model="taxAmount"
									disabled>
							</view>
						</view>
					</view>

					<!-- 备注 -->
					<view class="form-row">
						<view class="form-field textarea-field-wrapper">
							<view class="label-wrapper">
								<text class="field-label">备注</text>
							</view>
							<textarea class="textarea-field" placeholder="请输入备注信息" v-model="invoiceRemark"
								rows="3"></textarea>
						</view>
					</view>
				</form>
			</view>
		</view>

		<!-- 底部固定按钮区域 -->
		<view class="fixed-bottom-buttons">
			<navigator open-type="navigateBack" :delta="1" class="btn cancel-btn" @click.stop>
				取消
			</navigator>
			<button class="btn save-btn" @click="saveInvoice">
				保存
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				invoiceTypes: [{
						value: 'special',
						label: '增值税专用发票'
					},
					{
						value: 'ordinary',
						label: '增值税普通发票'
					},
					{
						value: 'electronic',
						label: '电子发票'
					},
					{
						value: 'motor',
						label: '机动车销售统一发票'
					},
					{
						value: 'other',
						label: '其他发票'
					}
				],
				selectedInvoiceType: -1,
				invoiceTitle: '',
				invoiceNo: '',
				invoiceDate: '',
				currentDate: this.formatDate(new Date()),
				seller: '',
				invoiceAmount: '',
				taxRate: '',
				taxAmount: '',
				invoiceRemark: ''
			};
		},
		onLoad() {
			this.invoiceDate = this.currentDate;
		},
		watch: {
			invoiceAmount() {
				this.calculateTaxAmount();
			},
			taxRate() {
				this.calculateTaxAmount();
			}
		},
		methods: {
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			onInvoiceTypeChange(e) {
				this.selectedInvoiceType = e.detail.value;
			},
			onInvoiceDateChange(e) {
				this.invoiceDate = e.detail.value;
			},
			validateTitle() {
				return !!this.invoiceTitle;
			},
			validateInvoiceNo() {
				return !!this.invoiceNo;
			},
			validateSeller() {
				return !!this.seller;
			},
			validateAmount() {
				return !!this.invoiceAmount && parseFloat(this.invoiceAmount) > 0;
			},
			validateTaxRate() {
				const rate = parseFloat(this.taxRate);
				return !isNaN(rate) && rate >= 0 && rate <= 100;
			},
			calculateTaxAmount() {
				if (this.validateAmount() && this.validateTaxRate()) {
					const amount = parseFloat(this.invoiceAmount);
					const rate = parseFloat(this.taxRate) / 100;
					this.taxAmount = (amount * rate).toFixed(2);
				} else {
					this.taxAmount = '';
				}
			},
			saveInvoice() {
				if (!this.validateForm()) return;

				const newInvoice = {
					id: Date.now().toString(),
					title: this.invoiceTitle,
					invoiceNo: this.invoiceNo,
					type: this.invoiceTypes[this.selectedInvoiceType].value,
					date: this.invoiceDate,
					amount: parseFloat(this.invoiceAmount),
					status: 'pending',
					seller: this.seller,
					taxRate: parseFloat(this.taxRate),
					taxAmount: parseFloat(this.taxAmount),
					remark: this.invoiceRemark || ''
				};

				let invoices = uni.getStorageSync('invoices') || [];
				invoices.unshift(newInvoice);
				uni.setStorageSync('invoices', invoices);

				uni.showToast({
					title: '发票添加成功',
					icon: 'success'
				});

				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			},
			validateForm() {
				if (this.selectedInvoiceType === -1) {
					uni.showToast({
						title: '请选择发票类型',
						icon: 'none'
					});
					return false;
				}
				if (!this.validateTitle()) {
					uni.showToast({
						title: '请输入发票标题',
						icon: 'none'
					});
					return false;
				}
				if (!this.validateInvoiceNo()) {
					uni.showToast({
						title: '请输入发票号码',
						icon: 'none'
					});
					return false;
				}
				if (!this.invoiceDate) {
					uni.showToast({
						title: '请选择开票日期',
						icon: 'none'
					});
					return false;
				}
				if (!this.validateSeller()) {
					uni.showToast({
						title: '请输入开票方名称',
						icon: 'none'
					});
					return false;
				}
				if (!this.validateAmount()) {
					uni.showToast({
						title: '请输入有效的发票金额',
						icon: 'none'
					});
					return false;
				}
				if (!this.validateTaxRate()) {
					uni.showToast({
						title: '请输入有效的税率(0-100%)',
						icon: 'none'
					});
					return false;
				}
				return true;
			}
		}
	};
</script>

<style>
	/* 全局容器样式 */
	.page-container {
		min-height: 100vh;
		background-color: #f9fafb;
		position: relative;
	}

	/* 导航栏样式 */
	.navbar-left {
		display: flex;
		align-items: center;
	}

	.back-navigator {
		display: flex;
		align-items: center;
	}

	.back-content {
		display: flex;
		align-items: center;
	}

	.navbar-title {
		font-size: 16px;
		font-weight: 600;
		color: #1e88e5;
		margin-left: 8px;
	}

	/* 内容容器样式 */
	.content-container {
		margin: 0 auto;
		padding: 16px;
		padding-bottom: 80px;
		/* 预留底部按钮空间 */
		box-sizing: border-box;
	}

	/* 表单卡片样式 */
	.form-card {
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		padding: 16px;
	}

	/* 表单行样式 */
	.form-row {
		margin-bottom: 14px;
		padding: 4px 0;
	}

	.form-field {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
	}

	/* 标签容器 */
	.label-wrapper {
		width: 100px;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		padding-right: 12px;
		box-sizing: border-box;
	}

	/* 字段标签样式 */
	.field-label {
		font-size: 14px;
		color: #6b7280;
	}

	.required-star {
		color: #f44336;
		margin-left: 4px;
	}

	/* 输入框样式 */
	.text-input {
		flex-grow: 1;
		height: 40px;
		padding: 0 12px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
		color: #1f2937;
		box-sizing: border-box;
	}

	.text-input::placeholder {
		color: #9ca3af;
		opacity: 1;
	}

	/* 选择器样式 */
	.picker-field {
		flex-grow: 1;
	}

	.picker-display {
		width: 100%;
		height: 40px;
		line-height: 40px;
		padding: 0 12px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
		color: #1f2937;
		box-sizing: border-box;
	}

	/* 金额输入框样式 */
	.amount-input-wrapper {
		flex-grow: 1;
		position: relative;
	}

	.currency-symbol {
		position: absolute;
		left: 12px;
		top: 10px;
		color: #6b7280;
	}

	.amount-input {
		width: 100%;
		height: 40px;
		padding: 0 12px 0 32px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
		color: #1f2937;
		box-sizing: border-box;
	}

	/* 税率输入框样式 */
	.tax-rate-input-wrapper {
		flex-grow: 1;
		position: relative;
	}

	.tax-rate-input {
		width: 100%;
		height: 40px;
		padding: 0 32px 0 12px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
		color: #1f2937;
		box-sizing: border-box;
	}

	.percent-symbol {
		position: absolute;
		right: 12px;
		top: 10px;
		color: #6b7280;
	}

	/* 税额输入框样式 */
	.tax-amount-input-wrapper {
		flex-grow: 1;
		position: relative;
	}

	.tax-amount-input {
		width: 100%;
		height: 40px;
		padding: 0 12px 0 32px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
		color: #1f2937;
		background-color: #f3f4f6;
		box-sizing: border-box;
	}

	/* 文本域样式 */
	.textarea-field-wrapper {
		align-items: flex-start;
		/* 文本域顶部对齐 */
		padding-top: 8px;
	}

	.textarea-field {
		flex-grow: 1;
		min-height: 80px;
		padding: 8px 12px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
		color: #1f2937;
		resize: vertical;
		box-sizing: border-box;
	}

	/* 底部固定按钮样式 */
	.fixed-bottom-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
		padding: 12px 16px;
		box-sizing: border-box;
		display: flex;
		gap: 12px;
		max-width: 750rpx;
		margin: 0 auto;
	}

	/* 按钮通用样式 */
	.btn {
		flex: 1;
		height: 44px;
		line-height: 44px;
		text-align: center;
		border-radius: 8px;
		font-size: 15px;
		font-weight: 500;
		transition: all 0.2s ease;
	}

	/* 取消按钮样式 */
	.cancel-btn {
		background-color: #f3f4f6;
		color: #4b5563;
		text-decoration: none;
	}

	.cancel-btn:active {
		background-color: #e5e7eb;
	}

	/* 保存按钮样式 */
	.save-btn {
		background-color: #1e88e5;
		color: #ffffff;
		border: none;
	}

	.save-btn:active {
		background-color: #1976d2;
	}
</style>